<template>
  <div class="app-container">
    <el-row style="margin-bottom:10px">
      <el-col :span="3">
        <el-input v-model="search.keyword" placeholder="keywords" style="width:95%" />
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="search.time_start"
          style="width:95%"
          type="date"
          placeholder="Start Time"
        />
      </el-col>
      <el-col :span="3">
        <el-date-picker
          v-model="search.time_end"
          style="width:95%"
          type="date"
          placeholder="End Time"
        />
      </el-col>
      <el-col :span="3">
        <el-select v-model="search.refund_state" clearable placeholder="Please Choose Status" style="width:95%" no-data-text="Can't find record">
          <el-option label="Pending review" :value="10" />
          <el-option label="Pass" :value="20" />
          <el-option label="Reject" :value="30" />
        </el-select>
      </el-col>
      <el-button type="primary" @click="getList">Search</el-button>
    </el-row>

    <el-table :data="userList" style="width: 100%;margin-top:30px;" border :empty-text="empty_text">
      <el-table-column align="center" label="ID" width="70">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column align="left" label="Order No." width="160">
        <template slot-scope="scope">{{ scope.row.order_no }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Refund No." width="160">
        <template slot-scope="scope">{{ scope.row.refund_no }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Goods" min-width="150">
        <template slot-scope="scope">{{ scope.row.goods ? scope.row.goods.map(v=> v.goods_name).join(',') : '' }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="User Name" min-width="150">
        <template slot-scope="scope">{{ scope.row.username }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Refund Amount" width="130">
        <template slot-scope="scope">{{ scope.row.refund_amount }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Refund Reason" min-width="130">
        <template slot-scope="scope">{{ scope.row.refund_reason }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Refund Status" width="120">
        <template slot-scope="scope">{{ scope.row.refund_state === 10? 'Pending review' : (scope.row.refund_state === 20? 'Pass' : (scope.row.refund_state === 30? 'Reject' : '')) }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Remark" min-width="130">
        <template slot-scope="scope">{{ scope.row.reject_reason }}</template>
      </el-table-column>
      <el-table-column align="header-center" label="Create Time" width="160">
        <template slot-scope="scope">{{ scope.row.create_time }}</template>
      </el-table-column>
      <el-table-column align="center" label="Action" width="130">
        <template slot-scope="scope">
          <el-col v-if="scope.row.refund_state === 10" :span="12">
            <span class="link-type" @click="handleAudit(scope, true)">
              Pass
            </span>
          </el-col>
          <el-col v-if="scope.row.refund_state === 10" :span="12">
            <span class="link-type" @click="handleAudit(scope)">
              Reject
            </span>
          </el-col>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="search.page"
      :page-size="search.pagesize"
      style="margin-top:10px; float:right"
      @current-change="getPageList"
    />

    <el-dialog :visible.sync="dialogVisible" :title="'Refund management'">
      <el-form ref="refundForm" :model="refundInfo" :rules="rules" label-width="130px" label-position="left">
        <el-form-item label="Refund No.">
          {{ refundInfo.refund_no }}
        </el-form-item>
        <el-form-item label="Order No.">
          {{ refundInfo.order_no }}
        </el-form-item>
        <el-form-item label="Refund Amount" prop="refund_amount">
          <el-input v-model="refundInfo.refund_amount" placeholder="Refund Amount" />
        </el-form-item>
        <el-form-item label="Refund Reason">
          {{ refundInfo.refund_reason }}
        </el-form-item>
        <el-form-item v-if="refundInfo.payment_type === 2" label="Trade No." prop="trade">
          <el-input v-model="refundInfo.trade_no" placeholder="Trade No." />
        </el-form-item>
        <el-form-item label="Remarks">
          <el-input v-model="refundInfo.reject_reason" type="textarea" :autosize="{ minRows: 2 }" placeholder="Remarks" />
        </el-form-item>
        <el-form-item label="Audit">
          {{ dialogType }}
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">Cancel</el-button>
        <el-button type="primary" @click="confirmUser">Confirm</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { baseAPI } from '@/utils/request'
import { getUserInfo, getDictionary } from '@/api/user'
import { geList, refundAudit } from '@/api/refund'

const DefaultRefundInfo = {
  id: 0,
  order_id: '',
  order_no: '',
  refund_amount: '',
  refund_no: '',
  refund_reason: '',
  refund_state: '',
  reject_reason: '',
  trade_no: '',
  username: ''
}
export default {
  data() {
    return {
      empty_text: '',
      userList: [],
      refundInfo: {
        id: 0,
        order_id: '',
        order_no: '',
        refund_amount: '',
        refund_no: '',
        refund_reason: '',
        refund_state: '',
        reject_reason: '',
        trade_no: '',
        username: ''
      },
      search: {
        time_start: '',
        time_end: '',
        refund_state: '',
        keyword: '',
        page: 1
      },
      total: 10,
      pagesize: 1,
      dialogVisible: false,
      dialogType: 'pass',
      checkList: [],
      statuslist: [],
      options: [
        {
          value: 1,
          label: 'Y'
        },
        {
          value: 0,
          label: 'N'
        }
      ],
      isReadOnly: false,
      LoginSelectValue: 'Y',
      GroupOptions: [],
      GroupSelectValue: '',
      hotelOptions: [],
      HotelSelectValue: [],
      rules: {
        refund_amount: [{ required: true, message: 'Please enter a Amount', trigger: 'blur' }],
        trade: { required: true, message: 'Please enter a Trade', trigger: 'blur' }
      }
    }
  },
  computed: {},
  watch: {
    dialogVisible(newValue, oldValue) {
      if (this.$refs['refundForm']) this.$refs['refundForm'].resetFields()
      if (!newValue) {
        this.refundInfo = Object.assign({}, DefaultRefundInfo)
      }
    }
  },
  created() {
    this.getList()
    this.GetRoleCheckbox()
    this.GetHotelCheckbox()
    this.getCheckList()
  },
  methods: {
    async GetRoleCheckbox() {
      this.GroupOptions = await baseAPI.get('user/dictionary/query?dict_type=role')
    },
    async GetHotelCheckbox() {
      this.hotelOptions = await baseAPI.get('user/dictionary/query?dict_type=hotel')
    },
    async getCheckList() {
      await getDictionary({ dict_type: 'wi_type' }).then(result => {
        this.checkList = result
      })
      this.statuslist = await getDictionary({ dict_type: 'order_status' })
    },
    async getList() {
      this.empty_text = 'Loading ......'
      await geList(this.search).then(res => {
        this.userList = res.data
        this.total = res.total
        this.currentpage = res.current_page
        this.pagesize = res.per_page
        this.empty_text = 'Can\'t find record in table'
      }).catch(() => {
        this.rolesList = []
        this.empty_text = 'Can\'t find record in table'
      })
    },
    async getPageList(value) {
      this.search.page = value
      this.empty_text = 'Loading ......'
      await geList(this.search).then(res => {
        this.userList = res.data
        this.total = res.total
        this.currentpage = res.current_page
        this.pagesize = res.per_page
        this.pagesize = 1
        this.empty_text = 'Can\'t find record in table'
      }).catch(() => {
        this.rolesList = []
        this.empty_text = 'Can\'t find record in table'
      })
    },
    // 退款审核
    async handleAudit(scope, flag) {
      this.dialogVisible = true
      if (flag) {
        this.dialogType = 'pass'
      } else {
        this.dialogType = 'reject'
      }
      this.refundInfo = Object.assign(this.refundInfo, scope.row)

      // this.refundInfo = await getUserInfo(scope.row.id)
      // this.refundInfo.contact_mobile = scope.row.contact_mobile
    },
    handleAddUser() {
      this.refundInfo = Object.assign({}, DefaultRefundInfo)
      if (this.$refs.tree) {
        this.$refs.tree.setCheckedNodes([])
      }
      this.isReadOnly = false
      this.dialogType = 'new'
      this.dialogVisible = true
    },
    async handleEditUser(user) {
      this.isReadOnly = true
      this.dialogType = 'edit'
      this.dialogVisible = true
      this.refundInfo = await getUserInfo(user.row.id)
      this.refundInfo.contact_mobile = user.row.contact_mobile
    },
    async confirmUser() {
      this.$refs.refundForm.validate(async valid => {
        if (valid) {
          if (this.dialogType === 'pass') {
            this.refundInfo.refund_state = 20
          } else {
            this.refundInfo.refund_state = 30
          }

          this.refundInfo.refund_amount = parseFloat(this.refundInfo.refund_amount)

          await refundAudit(this.refundInfo)
          this.dialogVisible = false
          this.$notify({
            title: 'Success',
            dangerouslyUseHTMLString: true,
            message: `
                <div>Success</div>
              `,
            type: 'success'
          })
          // 更新列表
          this.getList()
        }
      })
    },
    handleDeleteUser({ $index, row }) {
      this.$confirm('Confirm to remove the Staff?', 'Warning', {
        confirmButtonText: 'Confirm',
        cancelButtonText: 'Cancel',
        type: 'warning'
      })
        .then(async() => {
          await baseAPI.post('user/user/delete', { id: row.id })
          this.userList.splice($index, 1)
          this.$message({
            type: 'success',
            message: 'Delete succed!'
          })
        })
        .catch(err => { console.error(err) })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  .roles-table {
    margin-top: 30px;
  }
  .permission-tree {
    margin-bottom: 30px;
  }
}
</style>
